import React, { FC } from 'react';
import classnames from 'classnames';
import { IDevRibbonProp } from './index.d';
import styles from './dev-ribbon.module.less';

export const DevRibbon:FC<IDevRibbonProp> = (props) => {
  const { env } = props;

  const renderDevRibbon = () => {
    switch (env) {
      case 'development':
        return (
          <div className={classnames(styles.ribbon, styles.dev)}>
            <span>Development</span>
          </div>
        );
      case 'alpha':
        return (
          <div className={classnames(styles.ribbon, styles.test)}>
            <span>Test</span>
          </div>
        );
      case 'production':
      default:
        return null;
    }
  };
  return renderDevRibbon();
};

export default DevRibbon;
